<template>
  <div class="clearfix">
    <div class="detail_left">
      <h1>{{ allcontent.title }}</h1>
      <div class="easy_intr">
        <span class="iconfont icon-yueduliang"></span>{{ allcontent.read_ }}
        <span class="iconfont .icon-fenlei"></span
        >{{ BLOG_TYPE[allcontent.blog_type] }}
        <span class="iconfont icon-biaoqian"></span
        >{{ Tag[allcontent.blog_tag] }}
        <span class="iconfont icon-zuozhe"></span>{{ allcontent.author }}
        <span class="iconfont icon-fabushijian"></span
        >{{ getTime(allcontent.create_time) }}
      </div>
      <div class="content" v-html="content" v-highlight></div>
      <div class="comment_bord">
        <div class="comment_bordHeader">
          <img src="../../assets/img/ico_comm.png" alt="" />评论
        </div>
        <el-form
          :model="ruleForm"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item prop="desc">
            <el-input
              type="textarea"
              v-model="ruleForm.comment"
              v-model.trim="ruleForm.comment"
              :maxlength="240"
              placeholder="留下点什么吧?"
            ></el-input>
            <p class="reside-font">
              你还有{{ 200 - Number(ruleForm.comment.length) }}个字可以写
            </p>
            <div class="btnfu">
              <el-form-item>
                <el-button type="primary" @click="handlecomment"
                  >确认评论</el-button
                >
              </el-form-item>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <h1>{{ allcomment ? allcomment + "条" : "没有" }}评论</h1>
      <div class="comment_content">
        <div v-for="item in commentMessage" :key="item.id" class="userku">
          <p>
            用户:<span>{{ item.email }}</span
            ><span class="send_Time">{{ getTimes(item.create_time) }}</span>
          </p>
          <div class="comment_content-item">
            <p>{{ item.content }}</p>
            <p class="huifu" @click="showhuifu(item.id)">回复</p>
          </div>
          <div
            class="comment_bord"
            v-if="ishuifu && item.id === uniquecommentId"
          >
            <el-form
              :model="ruleForm"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item prop="desc">
                <el-input
                  type="textarea"
                  v-model="ruleForm.comment"
                  v-model.trim="ruleForm.comment"
                  :maxlength="240"
                  placeholder="回复?"
                ></el-input>
                <p class="reside-font">
                  你还有{{ 200 - Number(ruleForm.comment.length) }}个字可以写
                </p>
                <div class="btnfu">
                  <el-form-item>
                    <el-button type="primary" @click="handlecomment"
                      >回复</el-button
                    >
                  </el-form-item>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div class="detail_right">
      <tagClud :tagdata="handleTagdata"></tagClud> <followUs></followUs>
    </div>
  </div>
</template>
<script>
import { formatDate } from "../../util/tool";
import { getDetail, gettypetag, addcomment, getcomment } from "../../api/serve";
import tagClud from "@/components/tagClud.vue";
import followUs from "@/components/followUs.vue";
import { mapGetters } from "vuex";
// import { domainToUnicode } from "url";
// import { formatDate } from "../../util/tool";
export default {
  components: {
    tagClud,
    followUs,
  },
  data() {
    return {
      ishuifu: false,
      ruleForm: {
        comment: "",
      },
      uniquecommentId: "",
      commentMessage: "",
      page: 1,
      count: 1,
      allcomment: "",
      content: "",
      allcontent: {},
      handleTagdata: "",
      BLOG_TYPE: {
        "D1DC83DE-82DD-4375-950B-9FB067BD7424": "前端",
        "3A0BD8AB62084D9FA21B3FC8618233FD": "后端",
      },
      Tag: {},
    };
  },
  computed: {
    ...mapGetters("user", ["getUser"]),
  },
  watch: {
    $router: function (value) {
      console.log(value);
    },

    page: function (value) {
      console.log(value);
      let pageBlog = Math.ceil(this.allcomment / 10);
      if (value > pageBlog) {
        // console.log(1);
        // this.page = 1;
        return;
      }
      if (value == 1) {
        return;
      }
      getcomment({ page: value, blog_id: this.allcontent.blog_id }, (res) => {
        this.commentMessage = [...this.commentMessage, ...res.data];
      });
    },
  },
  mounted() {
    console.log(this.$route);
    this.init();
    if (document.querySelector(".comment_content")) {
      document
        .querySelector(".comment_content")
        .addEventListener("scroll", this.handleChangeP);
    } // this.initComment();
  },
  methods: {
    handleChangeP() {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop = document.querySelector(".comment_content").scrollTop;
      //变量windowHeight是可视区的高度
      var windowHeight =
        document.querySelector(".comment_content").clientHeight ||
        document.querySelector(".comment_content").clientHeight;
      //变量scrollHeight是滚动条的总高度
      var scrollHeight =
        document.querySelector(".comment_content").scrollHeight ||
        document.querySelector(".comment_content").scrollHeight;
      //滚动条到底部的条件
      console.log(scrollTop, windowHeight, scrollHeight);
      if (scrollTop + windowHeight >= scrollHeight - 10) {
        // console.log();
        //写后台加载数据的函数
        let pageBlog = Math.ceil(this.allcomment / 10);
        // console.log(pageBlog);
        if (this.page <= pageBlog) {
          this.page += 1;
          // this.count++;
        }
      }
    },
    showhuifu(id) {
      if (this.ishuifu == false) {
        this.uniquecommentId = id;
        this.ishuifu = true;
      } else {
        this.uniquecommentId = "";
        this.ishuifu = false;
      }
    },
    handlecomment() {
      // console.log(this.allcontent);
      const { blog_id } = this.allcontent;
      const { email } = this.getUser;
      console.log(this.getUser);
      if (!localStorage.getItem("token") || this.getUser === "") {
        this.$notify({
          type: "error",
          title: "失败",
          message: "请登陆后再评论",
          duration: 2000,
        });
        return;
      }
      if (this.ruleForm.comment != "") {
        addcomment(
          {
            email: email,
            blog_id: blog_id,
            content: this.ruleForm.comment,
          },
          (res) => {
            if (res.success) {
              this.ruleForm.comment = "";
              this.$notify({
                type: "success",
                message: "评论成功",
                duration: 2000,
              });
              this.page = 1;
              this.commentMessage = [];
              getcomment(
                { page: this.page, blog_id: this.allcontent.blog_id },
                (res) => {
                  // 将总评论数赋值给allcomment以便再dom中渲染
                  // this.count = 1;
                  this.allcomment = res.total;
                  this.commentMessage = res.data;
                  console.log(this.commentMessage);
                }
              );
            }
          }
        );
      } else {
        this.$notify({
          type: "error",
          title: "失败",
          message: "请填写内容后在进行评论",
          duration: 2000,
        });
      }
    },
    getTime(dateStr) {
      return formatDate(dateStr, "YYYY-MM-DD");
    },
    // 处理标签云数据
    getTimes(dateStr) {
      return formatDate(dateStr, "YYYY-MM-DD hh:mm:ss");
    },
    initTag(data) {
      let datas = [];
      let arr = [];
      if (data) {
        data.forEach(function (item) {
          arr = [];
          for (let i = 0; i < 3; i++) {
            let random = Math.ceil(Math.random() * 200);
            arr.push(random);
          }
          datas.push({
            rgb1: arr[0],
            rgb2: arr[1],
            rgb3: arr[2],
            tagid: item.tagid,
            tagname: item.tagname,
          });
        });
      }

      this.handleTagdata = datas;
    },

    init() {
      const { id } = this.$route.params;
      getDetail({ id: id }, (res) => {
        console.log(res);
        const { content } = res.data[0];
        this.allcontent = res.data[0];
        this.content = content;
        // 获取评论的接口
        getcomment(
          { page: this.page, blog_id: this.allcontent.blog_id },
          (res) => {
            // 将总评论数赋值给allcomment以便再dom中渲染
            this.allcomment = res.total;
            this.commentMessage = res.data;
          }
        );
        gettypetag((res) => {
          let data = res.data;
          this.initTag(data);
          this.tagTotal = data.length;
          this.TagData = data;
          let dataTag = {};
          data.forEach(function (item) {
            dataTag[item.tagid] = item.tagname;
          });
          this.Tag = dataTag;
        });
      });
    },
  },
};
</script>
<style lang="scss">
.send_Time {
  margin-left: 466px;
  font-size: 15px;
  color: rgb(179, 177, 177);
}
.huifu {
  color: rgb(160, 51, 51);
  margin-right: 15px !important;
  cursor: pointer;
}
.comment_content:hover.comment_content::-webkit-scrollbar-thumb {
  background: rgba(180, 98, 98, 0.4);
}
.comment_content {
  height: 400px;
  overflow: auto;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(180, 98, 98, 0);
    // opacity: 0;
    border-radius: 3px;
    // transition: all 3s linear;
    // display: none;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }
}
// .comment_content::-webkit-scrollbar-track {
// }
// .comment_content::-webkit-scrollbar-thumb {
//   border-radius: 5px !important;
//   background-color: red !important;
// }
.comment_content-item {
  display: flex;
  justify-content: space-between;
}
.userku {
  border-bottom: 1px solid #333;
}
.btnfu {
  position: absolute;
  right: 17px;
  bottom: 40px;
}
.comment_bord {
  .el-textarea {
    textarea {
      min-height: 260px !important;
    }
  }
  .reside-font {
    margin: 0;
  }
  .comment_bordHeader {
    display: flex;
    align-items: center;
  }
  .el-form-item__content {
    margin-left: 0 !important;
  }
  & > div img {
    width: 30px;
    margin-right: 5px;
  }
}
.easy_intr {
  text-align: center;
  span {
    margin-left: 3px;
  }
  &::after {
    display: block;
    content: "";
    height: 2px;
    background: rgb(240, 237, 237);
    margin-top: 10px;
    border-radius: 15px;
  }
}
.detail_left {
  float: left;
  padding: 15px;
  width: 800px;
  margin-right: 20px;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  & > h1:nth-child(1) {
    text-align: center;
  }
  h1 {
    margin-bottom: 15px;
  }
  h2 {
    margin: 15px 0;
  }
  p {
    word-spacing: 5px;
    margin: 15px 0;
  }
  li {
    word-spacing: 5px;
    margin-bottom: 15px;
  }
  h3 {
    margin: 15px 0;
  }
  // word-wrap: wrap;
  code {
    margin: 0 12px;
  }
  div {
    margin-bottom: 15px;
  }
}
.detail_right {
  float: left;
  width: 380px;
}
</style>
